<script setup lang="ts">
import { getCart, updateNum, selectCart, delCart, selectAll } from '../../api/cart'
import { useUserStore } from '../../stores/user';
import { ref } from 'vue';
import type { Ref } from 'vue'
import { iPro } from '../../utils/homeType';
import { showToast } from 'vant';
import router from '../../router';


const user = useUserStore()

const proList: Ref<iPro[]> = ref([])

// 标记是否全选
const isAll: Ref<boolean> = ref(false)

// 获取购物车数据
getCart({
  userid: user.userid
}).then(res => {
  proList.value = res.data.data;
  isSelectAllfn()
})

// 更新购物车数量的方法
function updateNumClick(type: string, item: iPro) {
  if (type == '10001') {
    // 减少
    // 如果 item.num 大于 1 就减一，否则就等于 1
    item.num = item.num > 1 ? item.num - 1 : 1
  } else if (type == '10002') {
    // 增加
    item.num++
  }

  updateNum({
    cartid: item.cartid,
    num: item.num
  }).then(res => {
    // console.log(res);
    showToast(res.data.message)
  })
}


// 更新购物车选中状态的点击事件
function changeCheckBox(item: iPro) {
  selectCart({
    cartid: item.cartid,
    flag: item.flag
  }).then(res => {
    showToast(res.data.message)

    isSelectAllfn()
  })
}
// 购物车单条数据的点击事件
function delClick(item: iPro) {
  // console.log('删除啦');
  delCart({
    cartid: item.cartid
  }).then(res => {
    showToast(res.data.message)
    getCart({
      userid: user.userid
    }).then(res => {
      proList.value = res.data.data;
      isSelectAllfn()
    })

  })
}

// 全选和取消全选
function changeAll() {
  // console.log(isAll.value);
  selectAll({
    userid: user.userid,
    type: isAll.value
  }).then(res => {
    // console.log(res);
    showToast(res.data.message)
    getCart({
      userid: user.userid
    }).then(res => {
      proList.value = res.data.data;
      isSelectAllfn()
    })
  })
}


// 验证是否为全选
function isSelectAllfn() {

  for (let i = 0; i < proList.value.length; i++) {
    const item = proList.value[i];
    if (!item.flag) {
      // 该项没有被选中
      isAll.value = false
      return
    }
  }

  // 如果所有的项全部都是选中状态，那么这里赋值为 true
  isAll.value = true
}

// 进入详情
function goDetail(proid) {
  router.push({
    path: '/detail',
    query: {
      proid
    }
  })
}
</script>
<template>
  <div class="box">
    <header class="header"> 购物车 </header>
    <div class="content">

      <van-swipe-cell class="swipe-cell" v-for="item in proList" :key="item.proid">
        <van-card :num="item.num" @click="goDetail(item.proid)" :price="item.originprice" :title="item.proname">

          <template #thumb>
            <div class="imgBox">
              <van-checkbox class="img-checkbox" @change="changeCheckBox(item)" v-model="item.flag"></van-checkbox>
              <van-image width="50" height="50" :src="item.img1"></van-image>
            </div>
          </template>

          <template #footer>
            <van-button class="changeBtn" @click="updateNumClick('10001', item)" size="mini">-</van-button>
            <van-button class="changeBtn" @click="updateNumClick('10002', item)" size="mini">+</van-button>
          </template>
        </van-card>

        <template #right>
          <van-button square text="删除" @click="delClick(item)" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>



      <van-submit-bar :price="3050" button-text="提交订单">
        <van-checkbox v-model="isAll" @click="changeAll">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>
<style scoped lang="scss">
.changeBtn {
  padding: 0 10px;
}

.imgBox {
  display: flex;
  flex-direction: row;
  align-items: center;

  .img-checkbox {
    padding-right: 15px;
  }
}

.goods-card {
  margin: 0;
}

.delete-button {
  height: 100%;
}

.swipe-cell {
  border-bottom: 5px solid white;
}

.van-submit-bar {
  bottom: 51px;
}
</style>
